<template>
  <div class="list_main">
    <con-title :topTitle="topTitle" />

    <el-tabs type="border-card" class="tabs" activeName="" @tab-click="tabClick">
      <el-tab-pane label="所有设备" name="all">
        <!-- form end -->
      </el-tab-pane>
      <el-tab-pane label="LoRaWAN" name="LoRaWAN"> </el-tab-pane>
      <el-tab-pane label="NB-lOT" name="NB-IoT"></el-tab-pane>
      <el-tab-pane label="4G/2G" name="4G/2G"> </el-tab-pane>
      <el-tab-pane label="LoRaPP" name="LoRaPP"> </el-tab-pane>
      <!-- 表单 -->
      <div class="form_con">
        <el-form label-width="80px">
          <el-form-item label="EUI">
            <el-input placeholder="设备EUI" v-model="sensor.eui"></el-input>
          </el-form-item>
          <el-form-item label="设备群组">
            <el-select
              style="width: 100%"
              placeholder="设备群组"
              v-model="sensor.groupName"
            >
              <el-option
                v-for="item in groupKeys"
                :key="Math.random() + item"
                :label="item"
                :value="item"
              ></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="在线状态">
            <el-select
              v-model="sensor.online"
              style="width: 100%"
              placeholder="请选择在线状态"
            >
              <el-option label="全部" style="font-size: 18px" value="全部">
              </el-option>
              <el-option label="在线" value="在线"></el-option>
              <el-option label="离线" value="离线"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="绑定时间">
            <el-date-picker
              type="datetimerange"
              start-placeholder="开始日期"
              end-placeholder="结束日期"
              v-model="sensor.date"
              range-separator="至"
              :default-time="['12:00:00']"
            >
            </el-date-picker>
          </el-form-item>
          <el-button-group>
            <el-button type="primary" @click="getSensorList" icon="el-icon-search">搜索</el-button>
            <el-button type="primary" @click="clearData" icon="el-icon-delete">清除条件</el-button>
            <el-button type="primary" @click="getSensorList(1)" icon="el-icon-refresh">刷新</el-button>
          </el-button-group>
          <span class="gray"> 搜索结果: {{ sensorData.total }}</span>
        </el-form>
      </div>
    </el-tabs>

    <el-table class="table" :data="sensorData.data" style="width: 100%">
      <el-table-column prop="index" width="50"> </el-table-column>
      <el-table-column prop="eui" label="EUI" width="180"> </el-table-column>
      <el-table-column
        prop="name"
        label="设备名称"
        width="180"
      ></el-table-column>
      <el-table-column
        prop="nums"
        label="传感器通道"
        width="100"
      ></el-table-column>
      <el-table-column
        prop="devGroup"
        label="设备群组"
        width="180"
      ></el-table-column>
      <el-table-column
        prop="loop"
        label="上报周期(分钟)"
        width="180"
      ></el-table-column>
      <el-table-column prop="mhz" label="频率(MHz)"> </el-table-column>
      <el-table-column prop="online" label="在线状态">
        <template slot-scope="scope">
          {{ scope.row.online | onlineType }}
        </template>
      </el-table-column>
      <el-table-column prop="bTime" label="绑定时间">
        <template slot-scope="scope">
          {{ scope.row.bTime | Time }}
        </template>
      </el-table-column>
      <el-table-column label="操作" width="100">
        <template>
          <el-button type="text" size="small">移动</el-button>
          <el-button type="text" size="small">数据</el-button>
        </template>
      </el-table-column>
    </el-table>
    <div class="pagination_center">
      
      <el-pagination
            @size-change="handleSizeChange"
            @current-change="currentChange"
            :page-sizes="[5, 10, 15]"
            :page-size="sensor.pageSize"
            :current-page="sensor.currPage"
            layout="total, sizes, prev, pager, next, jumper"
            :total="sensorData.total"
          >
          </el-pagination>
    </div>
  </div>
</template>

<script>
import ConTitle from "@/components/ConTitle.vue";
import { $getSensorList, $sensorList } from "@/api/api.js";

export default {
  name: "list",
  components: {
    ConTitle,
  },
  data() {
    return {
      topTitle: {
        type: "设备",
        text: "传感器列表",
        msg: "展示EUI、名称、状态等设备信息、可根据EUI、群组、状态、绑定时间等条件筛选具体的传感器节点，并提供移动群组等功能",
      },
      sensor: {
        online: "全部",
        eui: "",
        currPage: 1,
        pageSize: 5,
        agreement: "",
        groupName: "",
        date: "",
      },
      oldSensor:{},
      groupKeys: [], //全部群组keys
      sensorData: {},
    };
  },
  filters: {
    onlineType(val) {
      return val ? "在线" : "离线";
    },
    Time(val) {
      let date = new Date(val);
      let year = date.getFullYear();
      let month = fillZero(date.getMonth() + 1);
      let day = fillZero(date.getDate());
      let h = fillZero(date.getHours());
      let m = fillZero(date.getMinutes());
      let s = fillZero(date.getSeconds());
      function fillZero(v) {
        return v < 10 ? "0" + v : v;
      }
      return `${year}-${month}-${day} ${h}:${m}:${s}`;
    },
  },
  created() {
    this.getSensorList();
    this.getAllSensor();
  },
  methods: {
    currentChange(index) {
      this.sensor.currPage = index;
      this.getSensorList();
    },

    handleSizeChange(index){
      console.log(index+"‘阿斯顿撒大所大所大所");
      this.sensor.pageSize = index;
      this.sensor.currPage = 1;
      this.getSensorList();
    },

    clearData(){ //清除数据
      this.sensor ={
        online: "全部",
        eui: "",
        currPage: 1,
        pageSize: 5,
        agreement: "",
        groupName: "",
        date: "",
      }
    },

    //选项卡切换事件
    tabClick(ev) {
      this.sensor.agreement = ev.name;
      this.getSensorList();
    },

    //传感器列表，分页
    getSensorList(_data) {
      let data = {};
      if (_data != 1) {
        data = JSON.parse(JSON.stringify(this.sensor));
      } else {
        data = JSON.parse(JSON.stringify(this.oldSensor));
      }
      this.oldSensor = JSON.parse(JSON.stringify(data)); //拷贝
      data.online =
        data.online == "全部" ? "" : data.online == "在线" ? true : false;
      if (data.date && data.date.length == 2) {
        data.date =
          new Date(data.date[0]).getTime() +
          "-" +
          new Date(data.date[1]).getTime();
      }
      $getSensorList(data).then((res) => {
        console.log("传感器列表：", res);
        res.data.data = res.data.data.map((e, index) => {
          e.index = index + 1 + (this.sensor.pageSize*(this.sensor.currPage-1));
          return e;
        });
        this.sensorData = res.data;
      });
    },

    //获取全部传感器
    getAllSensor() {
      $sensorList().then((res) => {
        this.groupKeys = Object.keys(res.data.data);
        console.log(this.groupKeys);
      });
    },
  },
};
</script>

<style scoped lang="scss">
.list_main::-webkit-scrollbar {
  display: none;
}
.list_main {
  width: 100%;
  height: 100%;
  overflow-y: scroll;

  .table {
    margin-top: 10px;
  }

  .form_con {
    width: 400px;
    .gray {
      color: gray;
      font-size: 14px;
    }
  }
  .tabs {
    margin-top: 10px;
  }
  .pagination_center {
    text-align: center;
    width: 100%;
    height: 50px;
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: white;
  }
}
</style>